import { defaultProps } from 'antd-mobile/es/components/pull-to-refresh/pull-to-refresh';
import React, { Component, useState } from 'react'
import PropTypes from 'prop-types';
import { Button } from 'antd';
import { flushSync } from 'react-dom';

export default function Vote(props) {
    // console.log('组件渲染');
    let { title } = props

    let [supNum, setSupNum] = useState(10)
    let [oppNum, setOppNum] = useState(5)

    return (
        <div className='vote-box'>
            <div className="header">
                <h2 className='title'>{title}</h2>
                <span>{supNum + oppNum}</span>
            </div>
            <div className="main">
                <p>支持人数：{supNum}</p>
                <p>反对人数：{oppNum}</p>
            </div>
            <div className="footer">
                <button onClick={() => {
                    setSupNum(++supNum)
                }}>支持</button>
                <button onClick={() => {
                    setOppNum(++oppNum)
                }}>反对</button>
            </div>
            <p>===================</p>
            <Demo></Demo>
        </div>
    )
}



// export default class Vote extends Component {
//     // 属性规则校验 ////////// bug static defaultProps+static propTypes都不生效
//     static defaultProps = {
//         num: 0
//     }
//     static propTypes = {
//         title: PropTypes.string.isRequired,
//         num: PropTypes.number
//     }
//     constructor(props) {
//         super()
//         // console.log('props', props);
//     }
//     state = {
//         supNum: 10,
//         oppNum: 5
//     }
//     render() {
//         console.log('render');
//         let { title, num } = this.props

//         // let supNum = 10,
//         //     oppNum = 5
//         return (
//             <div className='vote-box'>
//                 <div className="header">
//                     <h2 className='title'>{title}</h2>
//                     <h4>{num}</h4>
//                     <span>{this.state.supNum + this.state.oppNum}</span>
//                 </div>
//                 <div className="main">
//                     <p>支持人数：{this.state.supNum}</p>
//                     <p>反对人数：{this.state.oppNum}</p>
//                 </div>
//                 <div className="footer">
//                     <button onClick={() => {
//                         this.setState({
//                             supNum: this.state.supNum + 1 // supNum:this.state.supNum++不起作用
//                         })
//                     }}>支持</button>
//                     <button onClick={() => {
//                         ++this.state.oppNum
//                         this.forceUpdate()
//                         // this.setState({
//                         //     oppNum: ++this.state.oppNum
//                         // })
//                     }}>反对</button>
//                 </div>
//             </div>
//         )
//     }

//     handleScroll = () => {
//         console.log('窗口滚动事件');
//     };

//     USAFE_componentWillUnmount() {
//         console.log('1.componentWillUnmount:第一次渲染之前');
//     }
//     componentDidMount() {
//         console.log('2.componentDidMount:首次渲染完成');
//         window.addEventListener('scroll', this.handleScroll);
//         this.timer = setInterval(() => {
//             console.log('定时器运行中...');
//         }, 100000);
//     }
//     shouldComponentUpdate(nextProps, nextState) {
//         // this.state===nextState
//         console.log('3.shouldComponentUpdate', nextProps, nextState);
//         return true
//     }
//     USAFE_componentWillMount() {
//         console.log('4.componentWillMount');
//     }
//     UNSAFE_componentWillReceiveProps(nextProps) {
//         console.log('5.componentWillReceiveProps', this.props, nextProps);
//     }

//     // getSnapshotBeforeUpdate(){
//     //     console.log('6.getSnapshotBeforeUpdate');
//     // }

//     componentDidUpdate() {
//         console.log('7.componentDidUpdate:DOM 更新完成');
//     }

//     componentWillUnmount() {
//         console.log('8.componentWillUnmount:组件销毁前清理定时器');
//         // 移除事件监听
//         window.removeEventListener('scroll', this.handleScroll);
//         console.log('滚动事件已移除');
//         // 清除定时器
//         clearInterval(this.timer);
//         console.log('定时器已清除');
//     }
// }
